<div class="header_menu">
    <div class="container">
        <div class="header-nav clearfix">
            <?php echo $this->partial('shop/layout/headerMenu'); ?>
        </div>
    </div>
</div>
</div>

<?php
$form = $this->form;
$form->prepare();
$form->setAttributes(['class' => 'form-horizontal']);
?>

<div class="container">
    <div class="xm-plain-box">
        <div class="box-hd">
            <h3 class="title"><?php echo $this->translate('手机找回密码'); ?></h3>
        </div>
        <div class="box-bd">
            <div class="row">
                <?php echo $this->partial('shop/message'); ?>

                <?php echo $this->form()->openTag($form); ?>
                <?php echo $this->formElement($form->get('shopCsrf')); ?>
                <?php echo $this->formElementErrors($form->get('shopCsrf'), ['class'=>'error-message']); ?>
                <div class="control-group">
                    <label for="input01" class="control-label"><?php echo $this->translate('用户名称'); ?>：</label>
                    <div class="controls">
                        <?php echo $this->escapeHtml($this->userInfo->getUserName()); ?>
                    </div>
                </div>
                <div class="control-group">
                    <label for="input01" class="control-label"><?php echo $this->translate('手机号码'); ?>：</label>
                    <div class="controls">
                        <?php echo $this->escapeHtml($this->userInfo->getUserPhone()); ?>
                    </div>
                </div>
                <div class="control-group">
                    <label for="input01" class="control-label"><?php echo $this->translate('手机验证码'); ?>：</label>
                    <div class="controls">
                        <?php echo $this->formElement($form->get('phoneCaptcha')->setAttributes(['class' => 'form-control', 'placeholder' => $this->translate('手机验证码')])); ?>
                        <button id="get_phone_captcha" type="button" class="button button-code btn btn-info "><?php echo $this->translate('获取验证码'); ?></button>
                        <?php echo $this->formElementErrors($form->get('phoneCaptcha'), ['class'=>'error-message']); ?>
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <button class="btn btn-primary" type="submit"><?php echo $this->translate('下一步'); ?></button>
                    </div>
                </div>
                <?php echo $this->form()->closeTag(); ?>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#<?php echo $form->getName(); ?>").validate({
            rules: {
                phoneCaptcha: {
                    required: true
                }
            },
            messages: {
                phoneCaptcha: {
                    required: "<?php echo $this->translate('请输入手机验证码!'); ?>"
                }
            }
        });
    });

    var oBtn = document.getElementById('get_phone_captcha');
    var flag = true;

    oBtn.addEventListener("click", function () {
        $.ajax({
            type: 'POST',
            url : "<?php echo $this->url('shop/default', ['action'=>'sendPhoneCaptcha']); ?>",
            data: {"phoneNumber": '<?php echo $this->userInfo->getUserPhone(); ?>', "areaCode": '<?php echo $this->userInfo->getAreaCode(); ?>'},
            success : function (msg) {
                if(typeof msg == "undefined" || msg == null || msg == '') {
                    startSend(<?php echo $this->shopHelper()->getPhoneCaptchaSecond(); ?>);
                } else {
                    layer.msg(msg);
                }
            }
        });
    });

    function startSend(expiredTime) {
        var time = expiredTime;
        oBtn.classList.add('disabled');
        if (flag) {
            flag = false;
            var timer = setInterval(() => {
                time--;
                oBtn.innerText = '已发送 ' + time + ' 秒';
                if (time === 0) {
                    clearInterval(timer);
                    oBtn.innerText = '重新获取';
                    oBtn.classList.remove('disabled');
                    flag = true;
                }
            }, 1000)
        }
    }
    <?php if(((int)$this->shopHelper()->getDbshopSessionData('expiredTime') - time()) > 0) { ?>
    startSend(<?php echo (int)$this->shopHelper()->getDbshopSessionData('expiredTime') - time(); ?>);
    <?php } ?>
</script>